<template>
	<view class="find-title y-flex y-row y-justify-center pt-30 pb-30">
		<view class="find-flower">
			<view class="find-title-squard-1" :style="{'border-color': color}"></view>
			<view class="find-title-squard-2" :style="{'border-color': color}"></view>
			<view class="find-title-line-1" :style="{'border-color': color}"></view>
			<view class="find-title-line-2" :style="{'border-color': color}"></view>
		</view>
		<view class="y-flex y-justify-center border-top-1 border-bottom-1" :style="{'border-color': color}">
			<text class="text-align-center fs-30 ml-20 mr-20" :style="{color}">{{titleSync}}</text>
		</view>
		<view class="find-flower find-flower-right">
			<view class="find-title-squard-1" :style="{'border-color': color}"></view>
			<view class="find-title-squard-2" :style="{'border-color': color}"></view>
			<view class="find-title-line-1" :style="{'border-color': color}"></view>
			<view class="find-title-line-2" :style="{'border-color': color}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: 'String',
				default: ''
			},
			color: {
				type: 'String',
				default: '#333'
			},
			options: {
				type: 'Object',
				default: () => ({})
			}
		},
		computed: {
			titleSync () {
				return this.options.title || this.title
			},
			colorSync () {
				return this.options.color || this.color
			}
		}
	}
</script>

<style>
	.find-title-line {
		height: 50rpx;
		border-radius: 50rpx;
	}
	.find-flower {
		width: 80rpx;
		height: 80rpx;
		position: relative;
	}
	.find-flower-right {
		transform: rotateZ(180deg);
	}
	.find-title-squard-1 {
		width: 15rpx;
		height: 15rpx;
		border-width: 1px;
		border-style: solid;
		position: absolute;
		top: 0;
		left: 0;
	}
	.find-title-squard-2 {
		width: 30rpx;
		height: 30rpx;
		border-top-width: 1px;
		border-left-width: 1px;
		position: absolute;
		top: 15rpx;
		left: 15rpx;
	}
	.find-title-line-1 {
		position: absolute;
		width: 55rpx;
		height: 45rpx;
		border-top-width: 1px;
		border-left-width: 1px;
		top: 0;
		left: 30rpx;
	}
	.find-title-line-2 {
		position: absolute;
		height: 55rpx;
		width: 45rpx;
		border-top-width: 1px;
		border-left-width: 1px;
		top: 30rpx;
		left: 0;
	}
</style>